<template>
  <div id="app-container">
    <div class="header-placeholder"></div>
    <div class="side-container" :style="{zIndex: sideZIndex}" v-show="show">
      <div class="side-wrapper">
        <van-popup class="side-popup" @closed="sideZIndex = 0" v-model="show" position="right" closeable>
          <side-view></side-view>
        </van-popup>
      </div>
    </div>
    <div class="app-container">
      <router-view></router-view>
    </div>
    <div class="header-container">
      <div class="header">
        <header-view :title="title" @popupClick="showSideView"></header-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HeaderView from '@/components/Header.vue'
import SideView from '@/components/Side.vue'
import { algorithms } from '@/store/modules/Algorithm'

@Component({
  components: { HeaderView, SideView }
})
export default class App extends Vue {
  sideZIndex = 0
  get title () : string {
    return this.$store.state.var.title
  }

  get show () : boolean {
    return this.$store.state.var.show
  }

  set show (v : boolean) {
    if (v) {
      this.sideZIndex = 120
    }
    this.$store.state.var.show = v
  }

  showSideView () : void {
    this.show = true
  }

  created () {
    // let wsBase = '/'
    // if (wsBase.startsWith('/')) {
    //   const wsSchema = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    //   wsBase = `${wsSchema}//${window.location.host}${wsBase}ai/open`
    // }
    // console.log(`${wsBase}/websocket/algorithm/video/call`)

    if (this.$route.path === '/' && !this.$route.params.id) {
      this.$router.replace(`/${algorithms.list[0].list[0].id}`).then(r => {
        console.log(r)
      })
    }
  }
}
</script>

<style lang="less">
// 公共样式
@import url("./assets/css/common.less");
@desktop-width: 500px;
#app-container {
  width: 100%;
  background: #f8f8f8;
  min-height: 100%;
  .header-placeholder {
    height: 2.75rem;
  }
  .header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    .header {
      max-width: @desktop-width;
      margin-left: auto;
      margin-right: auto;
      background: #121922;
      height: 100%;
    }
    @media (pointer:none), (pointer:coarse) {
      .header {
        max-width: unset;
      }
    }
  }
  .app-container {
    max-width: @desktop-width;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    background-color: #fff;
  }
  .side-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .side-wrapper {
      overflow: hidden;
      width: @desktop-width;
      height: 100%;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      .side-popup {
        position: absolute;
        height: 100%;
        width: 90%;
      }
      .side-popup::-webkit-scrollbar {
        width: 0;
      }
    }
    @media (pointer:none), (pointer:coarse) {
      .side-wrapper {
        width: 100%;
      }
    }
  }
  @media (pointer:none), (pointer:coarse) {
    .app-container {
      max-width: unset;
    }
  }
}
.van-dialog {
  width: 15.94rem !important;
  background: #999999 !important;
}
.van-dialog__content--isolated {
  height: 7.5rem !important;
}
.van-dialog__message {
  font-family: PingFangSC-Regular,sans-serif;
  font-size: 1.25rem !important;
  color: #ffffff !important;
}
.van-uploader__upload {
  margin: 0 !important;
}
.van-divider {
  margin: 0 !important;
  border-color: #f8f8f8 !important;
}
.van-divider::after,
.van-divider::before {
  height: 1.5rem !important;
  border-width: 1.5rem 0 0 !important;
}
.van-button--primary {
  height: 3rem !important;
  background: #167aa0 !important;
  border-radius: 0.5rem !important;
  width: 100% !important;
  border: 0 !important;
  .van-button__content {
    color: #ffffff !important;
    font-size: 1rem !important;
  }
}
</style>
